<template>
  <div class="box">
    <section>
      <h1>Reactive Data!</h1>
      <p><button @click="onPrintAll">print all</button></p>
      <p><button @click="onPrintSetup">print setup</button></p>
      <hr />
      <p>
        <button @click="count++">count is: {{ count }}</button>
      </p>
      <p><button @click="toggleIsLoading">toggle is loading</button></p>
      <hr />
      <p><button @click="onUserChange">change user</button></p>
      <p><button @click="onProductsChange">change products</button></p>
      <p><button @click="onConfigChange">change config</button></p>
      <p><button @click="onVisitorsChange">change visitors</button></p>
      <hr />
      <p><button @click="onTempUserChange">change temp user</button></p>
      <p><button @click="onTempProductsChange">change temp products</button></p>
      <p><button @click="onTempConfigChange">change temp config</button></p>
      <p><button @click="onTempVisitorsChange">change temp visitors</button></p>
    </section>

    <section>
      <h1>User</h1>
      <pre>{{ user }}</pre>
    </section>

    <section>
      <h1>Products</h1>
      <pre>{{ products }}</pre>
    </section>

    <section>
      <h1>Config</h1>
      <pre>{{ config }}</pre>
    </section>

    <section>
      <h1>Visitors</h1>
      <pre>{{ visitors }}</pre>
    </section>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'
import { info, warn } from '@/utils/logger'
import { useLifeCycle } from '@/hooks'

const temp = {}

export default {
  name: 'DataPage',
  data() {
    warn('== data ==')
    temp.user = {
      name: 'Tom',
      age: 18,
    }
    temp.products = [
      {
        id: 1,
        name: 'Apple',
      },
      {
        id: 2,
        name: 'Banana',
      },
    ]
    return {
      count: 0,
      isLoading: false,
      user: temp.user,
      products: temp.products,
    }
  },
  methods: {
    onPrintAll() {
      warn('== print all ==')
      console.log('this', this)
      console.log('temp', temp)
      console.log('user', this.user)
      console.log('products', this.products)
      console.log('config', this.config)
      console.log('visitors', this.visitors)
    },
    toggleIsLoading() {
      this.isLoading = !this.isLoading
    },
    onUserChange() {
      this.user.name = this.user.name === 'Tom' ? 'Jerry' : 'Tom'
    },
    onProductsChange() {
      this.products[0].name = this.products[0].name === 'Apple' ? 'Orange' : 'Apple'
    },
    onConfigChange() {
      this.config.prefix = this.config.prefix === 'xxx' ? 'ppp' : 'xxx'
    },
    onVisitorsChange() {
      this.visitors[0].name = this.visitors[0].name === 'Peter' ? 'Lily' : 'Peter'
    },
    onTempUserChange() {
      temp.user.name = temp.user.name === 'Tom' ? 'Jerry' : 'Tom'
    },
    onTempProductsChange() {
      temp.products[0].name = temp.products[0].name === 'Apple' ? 'Orange' : 'Apple'
    },
    onTempConfigChange() {
      temp.config.prefix = temp.config.prefix === 'xxx' ? 'ppp' : 'xxx'
    },
    onTempVisitorsChange() {
      temp.visitors[0].name = temp.visitors[0].name === 'Peter' ? 'Lily' : 'Peter'
    },
  },
  setup() {
    warn('== setup ==')
    useLifeCycle()
    temp.config = {
      prefix: 'xxx',
      suffix: 'yyy',
    }
    temp.visitors = [
      {
        name: 'Peter',
        age: 18,
      },
      {
        name: 'David',
        age: 20,
      },
    ]
    const config = reactive(temp.config)
    const visitors = reactive(temp.visitors)

    const onPrintSetup = () => {
      warn('== print setup ==')
      console.log('config-setup', config)
      console.log('visitors-setup', visitors)
    }
    return {
      config,
      visitors,
      onPrintSetup,
    }
  },
  beforeCreate() {
    info('life', 'beforeCreate')
  },
  created() {
    info('life', 'created')
  },
  beforeMount() {
    info('life', 'beforeMount')
  },
  mounted() {
    info('life', 'mounted')
  },
  beforeUpdate() {
    info('life', 'beforeUpdate')
  },
  updated() {
    info('life', 'updated')
  },
  beforeUnmount() {
    info('life', 'beforeUnmount')
  },
  unmounted() {
    info('life', 'unmounted')
  },
}
</script>

<style scoped lang="scss">
.box {
  display: flex;
  gap: 40px;

  section {
    flex: 1;
  }
}

pre {
  text-align: start;
  background-color: antiquewhite;
  border-radius: 4px;
  padding: 12px;
}
</style>
